<template>
  <div style="height: 100%; width: 100%; overflow: hidden;">
    <iframe
      ref="gisIframe"
      id="gisIframe"
      class="shadow-sm"
      name="gisIframe"
      title="iframe"
      width="100%"
      height="100%"
      :src="url"
      @load="onIframeLoad"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: './kcgis3x/index.html'
    };
  },
  methods: {
    onIframeLoad() {
      const gisWin = this.$refs.gisIframe.contentWindow;
      if (gisWin && gisWin.kcgis) {
        window.kcgis = gisWin.kcgis;
        window.mapApi = gisWin.mapApi;
      } else {
        // 如果kcgis对象在load事件时还未初始化，可以继续轮询
        this.pollForKcgis(gisWin);
      }
    },
    pollForKcgis(gisWin) {
      const checkDOMContentLoaded = setInterval(() => {
        if (gisWin.kcgis) {
          clearInterval(checkDOMContentLoaded);
          window.kcgis = gisWin.kcgis;
          window.mapApi = gisWin.mapApi;
        }
      }, 100);
    }
  }
};
</script>

<style scoped>
.shadow-sm {
  border: none;
}
</style>
